{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li>
                        <a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        {% if (error_warning) %}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        {% if (success) %}
            <div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ success }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        {{ handy_box }}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-list"></i> {{ text_list }}</h3>
            </div>
            <div class="panel-body">
                <div class="well"></div>
                <form action="{{ delete }}" method="post" enctype="multipart/form-data" id="form-article">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <td style="width: 4%;" class="text-center">Id</td>
                                <td style="width: 12%;" class="text-center">Image</td>
                                <td style="width: 30%;" class="text-center">Product Name</td>
                                <td style="width: 49%;" class="text-center">Post Title</td>
                                <td style="width: 5%;" class="text-center">Action</td>
                            </tr>
                            </thead>
                            <tbody>
                            {% if (products) %}
                                {% for product in products %}
                                    <tr>
                                        <td class="text-center">{{ product['product_id'] }}</td>
                                        <td class="text-center">
                                            {% if product.image %}
                                                <img src="{{product.image}}" alt="{{product.name}}" class="img-thumbnail" />
                                            {% else %}
                                                <span class="img-thumbnail list"><i class="fa fa-camera fa-2x"></i></span>
                                            {% endif %}
                                        </td>
                                        <td class="text-left">Name：{{ product['name'] }}<br/>Model：{{ product['model'] }}<br/>Keywords：{{ product['meta_keyword'] }}</td>
                                        <td class="text-left">
                                            {% if product.articles[0] and product.articles[0][0] %}
                                                <ul class="list-unstyled">
                                                    {% for article_data in product.articles[0] %}
                                                        <li>
                                                            <strong>Article ID:</strong> {{ article_data.article_id }}<br>
                                                            {% set language_titles = article_data[0] %}
                                                            {% for lang, titles in language_titles %}
                                                                {{ lang }}: {{ titles[0] }}<br>
                                                            {% endfor %}
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            {% else %}
                                                <em>没有相关文章</em>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            <a href="javascript:void(0);" data-toggle="modal" data-target="#articleModal" data-productid="{{ product['product_id'] }}" class="btn btn-primary edit-article" title="生成文章"><i class="fa fa-pencil"></i></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td class="text-center" colspan="6">{{ text_no_results }}</td>
                                </tr>
                            {% endif %}
                            </tbody>
                        </table>
                    </div>
                </form>
                <div class="row">
                    <div class="col-sm-6 text-left">{{ pagination }}</div>
                    <div class="col-sm-6 text-right">{{ results }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 弹窗模态框 -->
<div class="modal fade" id="articleModal" tabindex="-1" role="dialog" aria-labelledby="articleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="articleModalLabel">生成文章</h4>
            </div>
            <div class="modal-body">
                <form id="articleForm">
                    <input type="hidden" id="product_id" name="product_id" value="">
                    <div class="form-group required">
                        <label for="keywords">关键词（必填）</label>
                        <input type="text" class="form-control" id="keywords" name="keywords" placeholder="请输入关键词">
                    </div>
                    <div class="form-group required">
                        <label for="scenario">场景（必填）</label>
                        <input type="text" class="form-control" id="scenario" name="scenario" placeholder="请输入场景描述">
                    </div>
                    <div class="form-group">
                        <label for="scenario">商品名</label>
                        <input type="text" class="form-control" id="productname" name="productname" placeholder="请输入商品名">
                    </div>
                    <div class="form-group">
                        <label for="scenario">描述</label>
                        <textarea type="text" class="form-control" id="productdesc" name="productdesc" placeholder="请输入描述"></textarea>
                    </div>
                </form>
                <div id="formError" class="alert alert-danger" style="display:none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitArticle">发送</button>
            </div>
        </div>
    </div>
</div>
{{ footer }}
<script>
    $(document).ready(function() {
        // 当模态框显示时设置product_id
        $('#articleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var productId = button.data('productid');
            $('#product_id').val(productId);
            $('#formError').hide();
        });

        // 提交表单
        $('#submitArticle').click(function() {
            var keywords = $('#keywords').val().trim();
            var scenario = $('#scenario').val().trim();
            var productname = $('#productname').val().trim();
            var productdesc = $('#productdesc').val().trim();
            var productId = $('#product_id').val();

            // 验证输入
            if (!keywords || !scenario) {
                $('#formError').text('关键词和场景都不能为空').show();
                return;
            }

            // 显示提示信息
            toastr.success('文章正在生成请等候', '', {
                closeButton: true,
                progressBar: true,
                positionClass: "toast-top-center",
                timeOut: 3000
            });

            // 发送AJAX请求
            $.ajax({
                url: 'https://webapp.devdev.asia/api/rugby/irugby-article',
                type: 'POST',
                data: {
                    product_id: productId,
                    keywords: keywords,
                    scenario: scenario,
                    productname: productname,
                    productdesc: productdesc
                },
                success: function(response) {
                    // 这里不需要处理，因为用户不需要等待结果
                },
                error: function(xhr, status, error) {
                    // 即使出错也不提示用户，保持优雅
                }
            });

            // 关闭模态框
            $('#articleModal').modal('hide');
        });

        // 清空表单当模态框关闭时
        $('#articleModal').on('hidden.bs.modal', function () {
            $('#articleForm')[0].reset();
        });
    });

    // 如果尚未加载toastr，则加载它
    if(typeof toastr === 'undefined') {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css';
        document.head.appendChild(link);

        var script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js';
        document.body.appendChild(script);
    }
</script>
